<!DOCTYPE html>
<html>
<head>
<title>交易列表</title> <#include "/header.html">

<style type="text/css">
.web-width {font-size:12px;color:#333; font-family:"Microsoft Yahei"; overflow-x:hidden; background:#f7f7f7;}
.web-width{width:100%;margin:0 auto;}
.fl{float:left;}
.fr{float:right;}

/必要样式*/
.clears{ clear:both;}
.for-liucheng{width:640px;margin:0px auto 25px auto; height:50px;padding:20px 0 0 0; position:relative;}
.liulist{float:left;width:25%; height:7px; background:#ccc;}
.liutextbox{ position:absolute;width:100%;left:0;top:10px;}
.liutextbox .liutext{float:left;width:25%; text-align:center;}
.liutextbox .liutext em{ display:inline-block;width:24px; height:24px;-moz-border-radius: 24px; -webkit-border-radius: 24px;border-radius:24px; background:#ccc; text-align:center; font-size:14px; line-height:24px; font-style:normal; font-weight:bold;color:#fff;}
.liutextbox .liutext strong{ display:inline-block;height:26px;font-weight:400;}
.liulist.for-cur{ background:#77b852;}
.liutextbox .for-cur em{ background:#77b852;}
.liutextbox .for-cur strong{color:#77b852;}

.successs{ text-align:center;padding: 20px 0 60px 0;}
.successs h3{padding:20px; font-size:25px;color:#A0CD4E;}
.red {color:#ff0000!important;}

</style>

</head>
<body>
	<div id="rrapp" v-cloak>
		<div v-show="showList">
			<div class="grid-btn">
				<div class="form-group col-sm-2">
					<input type="text" class="form-control" v-model="q.orderNo" @keyup.enter="query" placeholder="订单号">
				</div>
				<div class="form-group col-sm-2">
					<input type="text" class="form-control" v-model="q.mobile" @keyup.enter="query" placeholder="手机号">
				</div>
				<a class="btn btn-default" @click="query">查询</a>
				<#if shiro.hasPermission("aic:ctoctransaction:update")>
				<a class="btn btn-primary" @click="sellerConfirm">
					<i class="fa fa-check"></i>&nbsp;确认收款
				</a>
				<a class="btn btn-primary" @click="update">
					<i class="fa fa-exclamation-triangle"></i>&nbsp;申诉处理
				</a>
				</#if>
			</div>
			<table id="jqGrid"></table>
			<div id="jqGridPager"></div>
		</div>

		<div v-show="!showList">
			<div class="panel panel-primary">
				<div class="panel-heading">
					<h3 class="panel-title">
						基本信息&nbsp;&nbsp;
						<a @click="closeDiv" class="label label-warning">返回</a>
					</h3>
				</div>
				<div class="panel-body">
					<div class="web-width">
						<div class="for-liucheng">
							<div class="liulist for-cur"></div>
							<div :class="['liulist',ctocTransaction.status>0 ? 'for-cur':'']"></div>
							<div :class="['liulist',ctocTransaction.status>1 ? 'for-cur':'']"></div>
							<div :class="['liulist',ctocTransaction.status>1 ? 'for-cur':'']"></div>
							<div class="liutextbox">
								<div class="liutext for-cur">
									<em>1</em><br />
									<strong>卖家下单<br />{{ctocTransaction.createTime}}
									</strong>
								</div>
								<div :class="['liutext',ctocTransaction.status>0 ? 'for-cur':'']">
									<em>2</em><br />
									<strong>买家付款<br />{{ctocTransaction.paymentTime}}</strong>
								</div>
								<div :class="['liutext',ctocTransaction.status>1 ? 'for-cur':'']">
									<em>3</em><br />
									<strong>卖家确认<br/>{{ctocTransaction.status==3 ? '' : ctocTransaction.finishTime}}</strong>
								</div>
								<div :class="['liutext',ctocTransaction.status>1 ? 'for-cur':'']">
									<em>4</em><br />
									<strong :class="{'red':ctocTransaction.status==3}">{{ctocTransaction.status==3 ? '订单取消' : '交易完成'}}<br/>{{ctocTransaction.finishTime}}	</strong>
								</div>
							</div>
						</div>
						<!--for-liucheng/-->
					</div>
					<!--web-width/-->
					<table class="table table-condensed">
						<thead>
							<tr>
								<th>订单号</th>
								<th>单价</th>
								<th>币数量</th>
								<th>总价</th>
								<th>手续费</th>
								<th>交易凭证</th>
								<th width="400px">申述信息</th>
							</tr>
						</thead>
						<tbody>
							<tr class="success">
								<td>{{ctocTransaction.orderNo}}</td>
								<td>{{ctocTransaction.coinPrice}}</td>
								<td>{{ctocTransaction.coinQuantity}}</td>
								<td>{{ctocTransaction.coinTotalPrice}}</td>
								<td>{{ctocTransaction.transFee}}</td>
								<td><a target='_blank' class='label label-primary' v-if="ctocTransaction.transProofImg" :href="ctocTransaction.transProofImg">交易凭证</a></td>
								<td>
									<span v-if="ctocTransaction.appealStatus==0" class="label label-primary">未申诉</span>
									<span v-if="ctocTransaction.appealStatus==1" class="label label-info">申诉中</span>
									<span v-if="ctocTransaction.appealStatus==2" class="label label-success">处理完成</span>
									{{ctocTransaction.appealDesc}}
								</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
			<div class="panel panel-primary">
				<div class="panel-heading">
					<h3 class="panel-title">买家信息</h3>
				</div>
				<div class="panel-body">
					<table class="table table-condensed">
						<thead>
							<tr>
								<th>姓名</th>
								<th>手机号</th>
								<th>支付宝</th>
								<th>微信</th>
								<th>银行</th>
								<th>支行</th>
								<th>银行卡号</th>
							</tr>
						</thead>
						<tbody>
							<tr class="success">
								<td>{{ctocTransaction.buyerRealname}}</td>
								<td>{{ctocTransaction.buyerMobile}}</td>
								<td>
									 <a target='_blank' v-if="ctocTransaction.buyerAlipayImg" :href="ctocTransaction.buyerAlipayImg">{{ctocTransaction.buyerAlipay}}</a>
									 <div v-else>{{ctocTransaction.buyerAlipay}}</div>
								</td>
								<td>
									<a target='_blank' v-if="ctocTransaction.buyerWechatImg" :href="ctocTransaction.buyerWechatImg">{{ctocTransaction.buyerWechat}}</a>
									<div v-else>{{ctocTransaction.buyerWechat}}</div>
								</td>
								<td>{{ctocTransaction.buyerBankName}}</td>
								<td>{{ctocTransaction.buyerBankNameBranch}}</td>
								<td>{{ctocTransaction.buyerBankCardNumber}}</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
			<div class="panel panel-primary">
				<div class="panel-heading">
					<h3 class="panel-title">卖家信息</h3>
				</div>
				<div class="panel-body">
					<table class="table table-condensed">
						<thead>
							<tr>
								<th>姓名</th>
								<th>手机号</th>
								<th>支付宝</th>
								<th>微信</th>
								<th>银行</th>
								<th>支行</th>
								<th>银行卡号</th>
							</tr>
						</thead>
						<tbody>
							<tr class="success">
								<td>{{ctocTransaction.sellerRealname}}</td>
								<td>{{ctocTransaction.sellerMobile}}</td>
								<td>
									 <a target='_blank' v-if="ctocTransaction.sellerAlipayImg" :href="ctocTransaction.sellerAlipayImg">{{ctocTransaction.sellerAlipay}}</a>
									 <div v-else>{{ctocTransaction.sellerAlipay}}</div>
								</td>
								<td>
									<a target='_blank' v-if="ctocTransaction.sellerWechatImg" :href="ctocTransaction.sellerWechatImg">{{ctocTransaction.sellerWechat}}</a>
									<div v-else>{{ctocTransaction.sellerWechat}}</div>
								</td>
								<td>{{ctocTransaction.sellerBankName}}</td>
								<td>{{ctocTransaction.sellerBankNameBranch}}</td>
								<td>{{ctocTransaction.sellerBankCardNumber}}</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
	<script src="${request.contextPath}/statics/js/modules/aic/ctoctransaction.js?_${.now?long}"></script>
</body>
</html>